<template>
  <div>
    <el-row class="samples-info-box">
      <el-col style="position:relative" :span="12">
        <div style="height: 290px;width:520px;margin:0 auto;">
          <span class="ec_title">商品数量:{{ echartsDataObjects.contractNum }}</span>
          <div
            ref="contract_num"
            style="height: 290px;width:520px;margin:0 auto;"
          /></div>
      </el-col>
      <el-col style="position:relative" :span="12">
        <div style="height: 290px;width:520px;margin:0 auto;">
          <span class="ec_title">
            商品金额: {{ (Number(echartsDataObjects.contractTotalMoney).toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,') }}</span>
          <div
            ref="chart_amount"
            style="height: 290px;width:520px;margin:0 auto;"
            />
          </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
const echarts = require('echarts/lib/echarts')
// 引入柱状图
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
export default {
  props: {
    echartsDataObjects: {
      type: Object,
      default: () => ({}),
      required: true
    }
  },
  data() {
    return {
      contract_num: undefined,
      chart_amount: undefined
    }
  },
  watch: {
    echartsDataObjects: {
      handler: function(val, oldval) {
        if (val) {
          this.setOpt_num()
          this.setOpt_amount()
        }
      },
      immediate: true, // 关键
      deep: true
    }
  },
  activated() {
    this.isActive = true
  },
  methods: {
    // 合同金额
    setOpt_amount() {
       this.$nextTick(() => {

 
      if (!this.chart_amount) {
        this.chart_amount = echarts.init(this.$refs.chart_amount)
      }
      const option = {
        color: ['#02affc', 'yellow', '#a1d75f', '#75d7fe', '#f781e1', '#ee6c6c', '#ffb121'],
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {d}%'
        },
        legend: {

          type: 'plain',
          orient: 'horizontal',
          x: 'center',
          y: 'bottom',
          //   itemGap: '10',
          align: 'auto',
          data: ['1亿以上', '1亿以内', '5000万以内', '1000万以内', '500万以内', '100万以内', '50万以内']
        },
        series: [{
          name: '访问来源',
          type: 'pie',
          center: ['50%', '125'],
          radius: ['0', '100'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center'
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [{
            value: this.echartsDataObjects.million,
            name: '1亿以上'
          },
          {
            value: this.echartsDataObjects.oneMillion,
            name: '1亿以内'
          },
          {
            value: this.echartsDataObjects.fiveThousandWan,
            name: '5000万以内'
          },
          {
            value: this.echartsDataObjects.thousandWan,
            name: '1000万以内'
          },
          {
            value: this.echartsDataObjects.fiveHundredWan,
            name: '500万以内'
          },
          {
            value: this.echartsDataObjects.hundredWan,
            name: '100万以内'
          },
          {
            value: this.echartsDataObjects.fiftyWan,
            name: '50万以内'
          }
          ]
        }]
      }


        this.chart_amount.setOption(option)
       });
    },
    // 合同数量
    setOpt_num() {
        this.$nextTick(() => {
      if (!this.contract_num) {
        this.contract_num = echarts.init(this.$refs.contract_num)
      }
      //   var color = ['#ff8c53', '#a1d75f', '#75d7fe', '#5ea5f3', '#f781e1', '#ed6b6b', '#ffb120', '#00e7d7']

      const option = {
        color: ['#ff8c53', '#a1d75f', '#75d7fe', '#5ea5f3', '#f781e1', '#ed6b6b', '#ffb120', '#00e7d7'],
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {d}%'
        },
        legend: {
          type: 'plain',
          orient: 'horizontal',
          x: 'center',
          y: 'bottom',
          bottom: '0',
          align: 'auto',
          //   itemGap: '10',
          data: ['单项贸易合同', '单项采购合同', '单项委托合同', '单项收入合同', '项目委托合同', '项目分包合同', '项目采购合同', '项目收入合同']
        },
        series: [{
          name: '访问来源',
          type: 'pie',
          center: ['50%', '125'],
          radius: ['63', '100'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center'
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [{
            value: this.echartsDataObjects.contractCaPercent,
            name: '单项贸易合同'
          },
          {
            value: this.echartsDataObjects.contractBaPercent,
            name: '单项采购合同'
          },
          {
            value: this.echartsDataObjects.contractDaPercent,
            name: '单项委托合同'
          },
          {
            value: this.echartsDataObjects.contractAaPercent,
            name: '单项收入合同'
          },
          {
            value: this.echartsDataObjects.contractDbPercent,
            name: '项目委托合同'
          },
          {
            value: this.echartsDataObjects.contractCbPercent,
            name: '项目分包合同'
          },
          {
            value: this.echartsDataObjects.contractBbPercent,
            name: '项目采购合同'
          },
          {
            value: this.echartsDataObjects.contractAbPercent,
            name: '项目收入合同'
          }
          ]
        }]
      }


      this.contract_num.setOption(option)
        })
    }
  }
}

</script>
<style lang="scss" scoped>
  .ec_title {
    position: absolute;
    text-indent: 36px;
  }

</style>
